<template>
  <div>

  </div>
</template>

<script setup>
import {onMounted, ref} from "vue"
import Compressor from "compressorjs";
import {ElMessage} from "element-plus";
import ItemList from "@/components/ItemList.vue";
import Clipboard from "clipboard";
import {useRouter} from "vue-router";

const listBoxHeight = ref(window.innerHeight - 40)
const mjBoxHeight = ref(window.innerHeight - 150)
window.onresize = () => {
  listBoxHeight.value = window.innerHeight - 40
  mjBoxHeight.value = window.innerHeight - 150
}
const rates = [
  {css: "horizontal", value: "16:9", text: "横图"},
  {css: "square", value: "1:1", text: "方图"},
  {css: "vertical", value: "9:16", text: "竖图"},
]
const models = [
  {text: "标准模型", value: " --v 5.2", img: "/images/mj-normal.png"},
  {text: "动漫模型", value: " --niji 5", img: "/images/mj-niji.png"},
]
const params = ref({
  rate: rates[1].value,
  model: models[0].value,
  chaos: 0,
  stylize: 0,
  seed: 0,
  raw: false,
  img: "",
  weight: 0.25,
  prompt: ""
})

const runningJobs = ref([])
const finishedJobs = ref([])
const previewImgList = ref([])
const router = useRouter()

const socket = ref(null)
const imgCalls = ref(0)

onMounted(() => {
  const clipboard = new Clipboard('.copy-prompt');
  clipboard.on('success', () => {
    ElMessage.success("复制成功！");
  })

  clipboard.on('error', () => {
    ElMessage.error('复制失败！');
  })
})

</script>

<style lang="stylus">
.custom-scroll {
  /* 修改滚动条的颜色 */
  ::-webkit-scrollbar {
    width: 8px; /* 滚动条宽度 */
  }
  /* 修改滚动条轨道的背景颜色 */
  ::-webkit-scrollbar-track {
    background-color: #282C34;
  }
  /* 修改滚动条的滑块颜色 */
  ::-webkit-scrollbar-thumb {
    background-color: #444444;
    border-radius 8px
  }
  /* 修改滚动条的滑块的悬停颜色 */
  ::-webkit-scrollbar-thumb:hover {
    background-color: #666666;
  }
}
</style>
